<template>
  <div>
    <page-table
      v-if="unitId"
      rowKey="userId"
      :ref="userPageTableRef"
      :query-api="user_queryPageApi"
      :query-param="queryParam"
      :delete-api="user_deletesApi"
      :export-api="user_exportApi"
      @addClick="addUser"
      :columns="columns"
      :search-data="searchData"
      :tool-bar="toolBar"
    >
      <template slot="extraBtn">
        <a-button type="primary" icon="link" @click="visible=true">关联用户</a-button>
        <qc-upload
          busi-id="importUser"
          item-type="importUserType"
          button-text="导入用户"
          :action="user_importApi"
          @uploadSuccess="uploadSuccess"
        />
      </template>
      <!-- 搜索列自定义 -->
      <template #customUserEmailQuery>
        <a-input v-model="queryParam.userEmail" placeholder="用户邮箱" @keyup.enter.native="reload" />
      </template>
      <template #customUserAccount="{text,record}">
        <router-link :to="userFormUrl+'/'+record.userId">
          <span>{{text}}</span>
        </router-link>
      </template>
      <template #customUserSexDesc="{text}">
        <a-tag :color="text=='男'?'#87d068':'#f50'">{{text}}</a-tag>
      </template>
      <template #customUserBrithday="{text}">
        <span>{{text |formatDateString('YYYY-MM-DD')}}</span>
      </template>
    </page-table>
    <a-modal
      title="选择用户"
      :visible="visible"
      @ok="addUnitUser"
      @cancel="()=>{visible=false}"
      :width="'80%'"
    >
      <select-user-table ref="selectUserTable" v-if="visible" :currentUnitId="unitId"></select-user-table>
    </a-modal>
  </div>
</template>
<script>
import {
  userFormUrl,
  user_queryPageApi,
  user_deletesApi,
  user_exportApi,
  user_importApi
} from "@/api/org/user";
import { downloadFile } from "@/utils/file";
import { userDeptInsertBatch } from "@/api/org/userDept";
import { importUser } from "@/api/org/user";

import { userTableColumns, userQueryColumns } from "@/profile/org/user";
export default {
  props: {
    //部门id
    unitId: {
      type: String
    }
  },
  data() {
    return {
      columns: userTableColumns,
      searchData: userQueryColumns,
      userFormUrl,
      user_queryPageApi,
      user_deletesApi,
      user_exportApi,
      user_importApi: "/future/" + user_importApi,
      queryParam: {
        unitId: this.unitId
      },
      userPageTableRef: "userPageTable",
      visible: false,
      toolBar: ["reload", "export", "size", "screenList"]
    };
  },
  methods: {
    reload() {
      this.$refs[this.userPageTableRef].reload();
    },
    addUser() {
      this.$router.push({
        path: this.userFormUrl,
        query: { unitId: this.queryParam.unitId }
      });
    },
    //新增部门用户关联
    addUnitUser() {
      let userIds = this.$refs.selectUserTable.getSelectUserIds();
      if (userIds.length == 0) {
        this.$message.warning("请选择用户");
        return false;
      }
      let userDepts = [];
      for (let i in userIds) {
        userDepts.push({ userId: userIds[i], deptId: this.unitId });
      }
      userDeptInsertBatch(userDepts).then(response => {
        this.visible = false;
        this.reload();
      });
    },
    uploadSuccess() {
      this.$message.success("上传成功");
      this.reload();
    }
  },
  watch: {
    unitId(val) {
      this.queryParam.unitId = val;
    }
  }
};
</script>